<template>
	<view class="content">
		<my-header @instruct="handinstruct" :title="parentTitle" />
		<view class="formBox">
			<up-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
				<up-form-item @click="showpiker" labelWidth="140rpx" label="收货地址" prop="userAddr" borderBottom
					ref="item1">
					<view class="">
						<span v-if="model1.userAddr !== ''">{{ model1.userAddr }}</span>
						<span v-else>省-市-区</span>
					</view>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>

				<up-form-item labelWidth="140rpx" label="详细地址" prop="detailedAddress" borderBottom ref="item1">
					<up-input placeholder="例：xx街道xx小区xx栋x-x" v-model="model1.detailedAddress" border="none"></up-input>
				</up-form-item>
				<up-form-item labelWidth="140rpx" label="联系人" prop="userName" borderBottom ref="item1">
					<up-input placeholder="收货人姓名" v-model="model1.userName" border="none"></up-input>
				</up-form-item>
				<up-form-item labelWidth="140rpx" label="手机号" prop="userPhone" ref="item1">
					<up-input placeholder="收货人手机" v-model="model1.userPhone" border="none"></up-input>
				</up-form-item>
			</up-form>
		</view>
		<view class="btnBox" v-if="parentTitle === '更改收货地址' ">
			<view>
				<up-button color="#013CAA" text="修改地址" @click="getUpdateAddr"></up-button>
			</view>
			<view>
				<up-button color="#ff0000" text="删除地址" @click="getDelAddr"></up-button>
			</view>
		</view>
		<view class="btnBox1" v-if="parentTitle === '新增收货地址' ">
			<up-button color="#013CAA" text="保存地址" @click="getSaveAddr"></up-button>
		</view>
		<up-picker @cancel="showLocal = false" @close="showLocal = false" visibleItemCount='3' :show="showLocal"
			:columns="addressColumns" @confirm="localConfirm" title="请选择所在地" keyName="value" itemHeight="80"
			closeOnClickOverlay ref="uPickerRef" @change="changeHandler" :defaultIndex="defaultAddress"
			immediateChange></up-picker>
	</view>
</template>

<script setup>
	import address from '../../utils/address.js';
	import {
		saveAddr,
		getAddrById,
		updateAddr,
		delAddr
	} from '../../utils/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const parentTitle = ref('')
	const aid = ref('')
	onLoad((option) => {
		if (option.aid) {
			judge(option.aid)
			aid.value = option.aid
		} else {
			parentTitle.value = '新增收货地址'
		}

	});
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				uni.redirectTo({
					url: '/subpages/AddressManagement/index'
				})
				break;
		}
	}
	//判断是否传入地址id
	const judge = (aid) => {
		if (aid) {
			parentTitle.value = '更改收货地址'
			getAddrById(aid).then(res => {
				model1.userName = res.data.userName
				model1.detailedAddress = res.data.detailedAddress
				model1.userAddr = res.data.userAddr
				model1.userPhone = res.data.userPhone
				model1.aid = aid
			})
		}
	}
	// 使用 reactive 创建响应式状态  
	const model1 = reactive({
		userName: '',
		detailedAddress: '',
		userPhone: '',
		userAddr: '',
		aid: '',
		openId: uni.getStorageSync('openid'),
		// rules: {
		// 	userName:[{ required: true, message: "名称不能为空", trigger: "blur" }],
		// 	detailedAddress:[{ required: true, message: "收货地址不能为空", trigger: "blur" }],
		// 	userPhone:[{ required: true, message: "电话不能为空", trigger: "blur" }],
		// },
	});
	// 使用 ref 创建响应式引用  
	const formRef = ref(null);
	const showLocal = ref(false);
	const defaultAddress = reactive([])
	const addressData = reactive([
		...address,
	])
	const showpiker = () => {
		showLocal.value = true
	}
	//省的数组
	const provinceData = address.map(e => {

		return {
			value: e.value,
			code: e.code
		} //这里可以直接return e.name  这里我是要用到code所以才用对象包起来的 下面的市 区 也一样
	})
	//市的数组
	const cityData = address.map(e => {
		const arr = []
		arr.push(
			e.children.map(c => {
				return {
					value: c.value,
					code: c.code
				}

			})
		)
		return arr
	})
	//区的数组
	const childrenData = address.map(e => {
		const arr = []
		arr.push(
			e.children.map(c =>
				c.children.map(d => {
					return {
						value: d.value,
						code: d.code
					}
				})
			)
		)
		return arr
	})
	const arr = [provinceData, cityData[0][0], childrenData[0][0][0]]
	console.log(arr);
	const addressColumns = reactive([
		...arr
	])
	//将得到的3个数组 的第一个市的所有数据赋值 作为初始数据
	const uPickerRef = ref(null)
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
			indexs,
			index,
		} = e;
		//如果改变的是第一列
		if (columnIndex === 0) {
			const children1 = addressData[index].children.map(e => {
				return {
					value: e.value,
					code: e.code
				}
			})
			uPickerRef.value.setColumnValues(1, children1)
			//更换 第二列数据
			const children2 = addressData[index].children[indexs[1]].children.map(e => {
				return {
					value: e.value,
					code: e.code
				}
			})
			uPickerRef.value.setColumnValues(2, children2)
			//更换 第三列数据
		}
		if (columnIndex === 1) {
			//如果改变的是第二列
			const children3 = addressData[indexs[0]].children[indexs[1]].children.map(e => {
				return {
					value: e.value,
					code: e.code
				}
			})
			uPickerRef.value.setColumnValues(2, children3)
			//更换 第三列数据
		}
	};

	const localConfirm = (e) => {
		console.log('confirm', e);
		model1.userAddr = e.value[0].value + '-' + e.value[1].value + '-' + e.value[2].value
		showLocal.value = false;
	};
	//返回上一页面
	const back = () => {
		uni.redirectTo({
			url: '/subpages/AddressManagement/index'
		})
	}
	// 新增收货地址
	const getSaveAddr = () => {
		let params = {
			...model1
		}
		saveAddr(params).then(res => {
			if (res.code === 200) {
				console.log('上传成功')
				uni.reLaunch({
					url: '/subpages/AddressManagement/index'
				})
			}
		})
	}
	//修改收货地址
	const getUpdateAddr = () => {
		let params = {
			...model1
		}
		updateAddr(params).then(res => {
			if (res.code === 200) {
				console.log('修改成功')
				uni.reLaunch({
					url: '/subpages/AddressManagement/index'
				})
			}
		})
	}
	//删除收货地址
	const getDelAddr = () => {
		delAddr(aid.value).then(res => {
			if (res.code === 200) {
				console.log('删除成功')
				uni.reLaunch({
					url: '/subpages/AddressManagement/index'
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;

		.formBox {
			padding: 30rpx;

			::v-deep .u-form-item__body {
				align-items: center;
				padding: 40rpx 0 !important;
			}
		}

		.btnBox {
			width: 100%;
			padding: 0 30rpx;
			height: 90rpx;
			margin-top: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				width: 320rpx;
			}
		}

		.btnBox1 {
			width: 100%;
			padding: 0 30rpx;
			height: 90rpx;
			margin-top: 60rpx;
		}
	}
</style>